/** @jsx React.DOM */
var React = require('react');

var Dialog = React.createClass({
	render: function() {
		if (this.state.hide) {
			return null;
		}
		var containerStyle = {
			width: this.props.width
		};

		var btnClassName,spanStyle;

		if (this.state.times > 0) {
			btnClassName = "pure-button pure-button-primary pure-button-disabled";
			spanStyle = {
				'visibility': 'normal'
			};
		} else {
			btnClassName = "pure-button pure-button-primary";
			spanStyle = {
				'display': 'none'
			};
		}

		return (
			<div className="dialog" style={containerStyle}>
				<div className="dialog-header" onMouseDown={this.handleHeaderDragStart}>
					<button onClick={this.closeDialog}>&times;</button>
					<h4>{this.props.title}</h4>
				</div>
				<div className="dialog-body">
					{this.props.children}
				</div>
				<div className="dialog-footer">
					<form>
						<button className={btnClassName} onClick={this.handleFirstClick}>
							<span style={spanStyle}>({this.state.times})</span>
								{this.props.firstBtnName}
						</button>
						<button className="pure-button" onClick={this.handleSecondClick}>
							{this.props.secondBtnName}
						</button>
					</form>
				</div>
			</div>
		)
	},
	closeDialog: function() {
		this.setState({hide: true});
	},
	handleFirstClick: function() {
		if (this.state.times !== 0) {
			return;
		}
		this.props.firstBtnAction.apply(this, arguments);
	},
	handleSecondClick: function() {
		this.props.secondBtnAction.apply(this, arguments);
	},
	getDefaultProps: function() {
		return {
			firstBtnName: 'OK',
			secondBtnName: 'Cancel',
			firstBtnAction: function() {
				console.log('first button clicked');
			},
			secondBtnAction: function() {
				console.log('second button clicked');
			}
		};
	},
	getInitialState: function() {
		return {times: 9};
	},
	addTimes: function() {
		if (this.state.times > 0) {
			this.setState({times: this.state.times - 1});
			setTimeout(this.addTimes, 1000);
		}
	},
	componentDidMount: function() {
		setTimeout(this.addTimes, 1000);
	}
});

module.exports = Dialog;
